<template>
    <footer :class="['public-footer', isTransparent ? 'public-footer-transparent' : '']">
        <div class="tips">
            {{ userInfo.title }},{{ userInfo.brfie }}
        </div>
        <div class="linkList">
            <div class="item">友情链接：</div>
            <div class="item" v-for="(item, index) in links" :key="index">
                <a :href="item.url" target="_blank" rel="noopener noreferrer">
                    {{ item.title }}
                </a>
            </div>
        </div>
        <div class="footer-tips">
            <p>&copy;2021-{{ runTime.year }},个人博客</p>
            <p >
                <span class="beian">
                    <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer"
                        alt="渝ICP备2023001910号">渝ICP备2023001910号</a>
                </span>
                <span class="beian">
                    <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=50023402000664"
                        target="_blank">渝公网安备50023402000664号</a>

                </span>
            </p>
            <p>本网站勉强运行{{ runTime.days }}天</p>
        </div>
    </footer>
</template>
<script>
export default {
    name: 'PublicFooter',
    props: {
        userInfo: {
            type: Object,
            defalut: () => {
                return {}
            }
        },
        links: {
            type: Array,
            defalut: () => {
                return []
            }
        },
        /**是否透明*/
        isTransparent: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            runTime: {
                days: new Date().getFullYear(),
                year: 0
            }
        }
    },
    mounted() {
        this.runTime = this.getRunTime();
    },
    methods: {
        getRunTime() {
            let date = new Date();
            let year = date.getFullYear();
            let mouth = date.getMonth() + 1;
            let day = date.getDate();
            let days = new Date(year + "-" + mouth + "-" + day) - new Date("2021-08-05");
            return {
                year,
                days: Math.floor(days / 1000 / 60 / 60 / 24) + 1
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.public-footer {
    width: 100%;
    background-color: #F8F9FB;
    position: relative;
    z-index: 2;
    padding-bottom: 20px;

    .tips {
        text-align: center;
        color: #666;
        font-size: 14px;
    }

    .linkList {
        display: flex;
        justify-content: center;

        .item {
            font-size: 14px;
            margin: 5px 10px;
            color: #666;
        }

        a {
            font-size: 14px;
            color: #666;

            &:hover {
                color: skyblue;
            }
        }
    }

    .footer-tips {
        p {
            font-size: 14px;
            color: #666;
            text-align: center;
            padding: 0;
            margin: 0;
        }
    }
}

.public-footer-transparent {
    background: transparent;
}

.beian{
    margin-right: 10px;
}
</style>